import React  from "react";

import { Layout, Tour } from "antd";
import SideMenu from "@/layouts/components/AppSideMenu";
import AppHeader from "@/layouts/components/AppHeader";
import AppContent from "@/layouts/components/AppContent";
import AppFooter from "@/layouts/components/AppFooter";
import { useDispatch, useSelector } from "react-redux";
import { setTourGuide } from "@/store/modules/app";
export default function Index() {

  const { tourGuide } = useSelector((state) => state.appSlice);
  const dispatch=useDispatch()
  const steps = [
    {
      title: "头部区域",
      description: "左侧按钮可折叠menu菜单,右侧为用户信息",
      target: document.querySelector("#header"),
    },
    {
      title: "左侧菜单区域",
      description: "根据权限不同展示不同菜单",
      target: document.querySelector("#side-menu"),
    },
    {
      title: "内容区域",
      description: "展示当前路由页面",
      target: document.querySelector("#content"),
    },
    {
      title: "底部区域",
      description: "全局播放音乐组件",
      target: document.querySelector("#aplayer"),
    },
  ];
  return (
    <Layout style={{ height: "100%" }}>
      {/* 左侧 SideMenu */}
      <SideMenu  />
      <Layout>
        {/*头部 header */}
        <AppHeader />
        {/* 主体内容 content */}
        <AppContent />
        <AppFooter />
      </Layout>
      <Tour open={tourGuide} onClose={() => dispatch(setTourGuide(false))} steps={steps} />
    </Layout>
  );
}
